<template>
  <el-container class="max-md:!flex-col">
    <el-main class="md:w-1/4 gap-5 !flex flex-col max-md:flex-row max-sm:flex-col">
      <el-main
        class="use-shadow use-radius-sm text-black bg-gradient-to-r from-orange-100 to-teal-100 min-h-40 !flex flex-col justify-center"
      >
        <span class="flex text-5xl max-md:text-5xl max-xl:text-3xl pb-2 ellipsis-1">999999</span>
        <span class="lg:text-xl">总访客</span>
      </el-main>
      <el-main
        class="use-shadow use-radius-sm text-black bg-gradient-to-r from-teal-100 to-orange-100 min-h-40 !flex flex-col justify-center"
      >
        <span class="flex text-5xl max-md:text-5xl max-xl:text-3xl pb-2 ellipsis-1">666</span>
        <span class="lg:text-xl">今日访客</span>
      </el-main>
    </el-main>
    <el-main class="md:w-3/4 h-96">
      <CarouselDeploy />
    </el-main>
  </el-container>
  <RouteA :name="RouteNameEnum.ABOUT" message="查看详情" />
</template>

<script lang="ts" setup>
import { RouteNameEnum } from '@/enum'
</script>

<style lang="scss" scoped>
.el-carousel {
  &:deep(.el-carousel__indicators) {
    .el-carousel__button {
      width: 1rem;
      height: 1rem;
      margin: 2px 0;
      border-radius: 50%;
    }
  }
}
</style>
